<script setup lang="ts">
  import { ref } from 'vue';
  import { FormInstance, Message, TableInstance } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import Add from './zhihi/add.vue';
  import Edit from './zhihi/edit.vue';
  const proTableRefa = ref<TableInstance | null>(null);
  import {
    addzhizhicompany,
    deletezhizhicompany,
    getzhizlist,
  } from '@/api/enterlibery';
  const formRef = ref<FormInstance | null>(null);
  const props = defineProps({
    visible: Boolean,
    params: Object,
  });
  const { loading, setLoading } = useLoading(false);
  defineOptions({
    name: 'addcomponenItem',
  });
  const formType = ref();
  onMounted(() => {
    formType.value = [
      {
        name: 'qual_title',
        label: '资质名称',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            required: true,
            message: '请输入',
          },
        ],
      },
      {
        name: 'qual_level',
        label: '资质级别',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            required: true,
            message: '请选择',
          },
        ],
      },
      {
        name: 'qual_dept',
        label: '认定部门',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            required: true,
            message: '请输入',
          },
        ],
      },
      {
        name: 'qual_year',
        label: '年份',
        type: 'a-year-picker',
        fieldProps: {
          span: 24,
          placeholder: '',
        },
        rules: [
          {
            required: true,
            message: '请选择',
          },
        ],
      },
      {
        name: 'qual_url',
        label: '文件来源',
        type: 'a-input',
        fieldProps: {
          span: 24,
        },
        rules: [
          {
            required: false,
            message: '请输入',
          },
        ],
      },
    ];
  });
  const formData = ref({});
  const emit = defineEmits(['update:visible', 'refresh']);
  const handleSubmit = async () => {
    if (!(await formRef.value?.checkForm())) {
      try {
        setLoading(true);
        const dataForm = formRef.value?.formModel;
        const res = await addzhizhicompany({
          ...dataForm,
          company_id: props.params,
        });
        setLoading(false);
        Message.success(res.msg);
        emit('update:visible', false);
        emit('refresh');
      } catch (error) {
        // Message.error(error);
        setLoading(false);
      } finally {
        setLoading(false);
      }
    } else {
      Message.error('请正确填写表单！');
    }
  };
  const editParam = ref();
  const visible1 = ref(false);
  const visible2 = ref(false);
  const tableType = [
    { dataIndex: 'qual_id', slotName: 'id' },
    {
      title: '资质名称',
      dataIndex: 'qual_title',
    },
    {
      title: '资质级别',
      dataIndex: 'qual_level',
    },
    {
      title: '认定部门',
      dataIndex: 'qual_dept',
    },
    {
      title: '年份',
      dataIndex: 'qual_year',
    },
    {
      title: '文件来源',
      dataIndex: 'qual_file_name',
      align: 'center',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '修改',
          onClick: (record: any) => {
            visible1.value = true;
            editParam.value = {
              qid: record.qual_id,
              cid: props.params,
            };
          },
        },
        {
          name: '删除',
          onClick: (record: any) => {
            deletezhizhicompany({
              qual_ids: [record.qual_id],
            }).then((res) => {
              proTableRefa.value?.setRefresh();
              Message.success('删除成功！');
              request();
            });
          },
        },
      ],
    },
  ];
  async function request() {
    const res = await getzhizlist({
      company_id: props.params,
    });
    return {
      data: res.data,
    };
  }
</script>

<template>
  <a-modal
    title="企业资质"
    :visible="visible"
    @ok="
      () => {
        emit('update:visible', false);
      }
    "
    title-align="start"
    :ok-loading="loading"
    width="55%"
    @cancel="
      () => {
        emit('update:visible', false);
      }
    "
  >
    <pro-table
      style="margin-top: 30px"
      ref="proTableRefa"
      :request="request"
      :formType="[]"
      :tableType="tableType"
    >
      <template #btns>
        <a-button
          type="primary"
          @click="
            () => {
              visible2 = true;
              editParam = props.params;
            }
          "
        >
          <template #icon> <icon-plus /> </template>
          <template #default>添加企业</template>
        </a-button>
      </template>
      <template #options>
        <Add
          v-if="visible2"
          v-model:visible="visible2"
          :params="editParam"
          @refresh="
            () => {
              $refs.proTableRefa.setRefresh();
            }
          "
        />
        <Edit
          v-if="visible1"
          v-model:visible="visible1"
          :params="editParam"
          @refresh="
            () => {
              $refs.proTableRefa.setRefresh();
            }
          "
        />
      </template>
    </pro-table>
    <div> </div>
    <div> </div>
  </a-modal>
</template>

<style scoped lang="less">
  :deep(.arco-select-view-inner) {
    text-align: left !important;
  }
  .titile {
    margin-left: 12px;
    font-size: 13px;
    color: #4e5969;
  }
</style>
